<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" /> <!-- 设置文档字符编码为UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- 设置视口以适应不同设备 -->
  <title>动漫推荐（小宇制作组）</title> <!-- 设置页面标题 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- 固定导航栏 -->
  <nav class="navbar fixed-navbar">
    <!-- 左侧导航 -->
    <div class="nav-left">
      <a href="第二版主页面.html">首页</a> <!-- 链接至首页 -->
      <a href="空白页面.html">番剧</a> <!-- 链接至番剧页面 -->
      <a href="空白页面.html">漫画</a> <!-- 链接至漫画页面 -->
    </div>

    <!-- 中间搜索 -->
    <div class="nav-center">
      <input type="text" placeholder="搜索你想看的番剧..." /> <!-- 搜索输入框 -->
    </div>

    <!-- 右侧功能 -->
    <div class="nav-right">
      <a href="空白页面.html">消息</a> <!-- 链接至消息页面 -->
      <a href="空白页面.html">收藏</a> <!-- 链接至收藏页面 -->
      <a href="空白页面.html">历史</a> <!-- 链接至历史页面 -->
    </div>
  </nav>

  <!-- 背景图容器 -->
  <div class="full-bg">
    <!-- <img src="https://i0.hdslb.com/bfs/archive/934e4e4cc925f49ea410da4c40f5bdbdc3a3e2f5.jpg" alt="背景图"> 背景图片 -->
  </div>

  <!-- 页面主体内容 -->
  <div class="container">

    <!-- 主体内容 -->
    <main>
      <!-- 左侧边栏 - 图片轮播图 -->
      <aside class="sidebar">
        <div class="carousel">
          <div class="carousel-inner" id="carouselInner">
            <div class="carousel-item active">
              <a href="空白页面.html" class="image-link">
                <img src="https://img0.baidu.com/it/u=2792150366,2610293788&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707" alt="广告1" /> <!-- 图片链接 -->
                <div class="image-caption">日漫</div> <!-- 图片描述 -->
              </a>
            </div>
            <div class="carousel-item">
              <a href="空白页面.html" class="image-link">
                <img src="https://img2.baidu.com/it/u=1978476053,4078855198&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="广告2" /> <!-- 图片链接 -->
                <div class="image-caption">国漫</div> <!-- 图片描述 -->
              </a>
            </div>
            <div class="carousel-item">
              <a href="空白页面.html  " class="image-link">
                <img src="https://img2.baidu.com/it/u=701994538,2840121325&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="广告3" /> <!-- 图片链接 -->
                <div class="image-caption">国漫更新</div> <!-- 图片描述 -->
              </a>
            </div>
          </div>
          <button class="carousel-btn prev" onclick="prevSlide()">&#10094;</button> <!-- 上一张按钮 -->
          <button class="carousel-btn next" onclick="nextSlide()">&#10095;</button> <!-- 下一张按钮 -->
        </div>
      </aside>

      <!-- 右侧内容区 -->
      <section class="content">
        <h2>热门番剧</h2> <!-- 标题 -->
        <div class="video-grid">
          <a href="空白页面.html" class="image-link">
            <img src="https://img1.baidu.com/it/u=183125454,1505809988&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082" alt="动漫8" /> <!-- 图片链接 -->
            <div class="image-caption">跃动青春</div> <!-- 图片描述 -->
          </a>
          <a href="空白页面.html" class="image-link">
            <img src="https://img0.baidu.com/it/u=3583668718,3984619169&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708" alt="动漫9" /> <!-- 图片链接 -->
            <div class="image-caption">夏日重现</div> <!-- 图片描述 -->
          </a>
          <a href="空白页面.html" class="image-link">
            <img src="https://img0.baidu.com/it/u=3021045991,2360662135&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=757" alt="动漫10" /> <!-- 图片链接 -->
            <div class="image-caption">四月是你的谎言</div> <!-- 图片描述 -->
          </a>
          <a href="空白页面.html" class="image-link">
            <img src="https://img1.baidu.com/it/u=2143636656,3807739572&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1728" alt="动漫11" /> <!-- 图片链接 -->
            <div class="image-caption">紫罗兰永恒花园</div> <!-- 图片描述 -->
          </a>
        </div>
      </section>
    </main>

    <!-- 新增：更多视频区域 -->
    <section class="content more-videos">
      <h2>热门动漫</h2> <!-- 标题 -->
      <div class="video-grid video-grid--more">
        <a href="空白页面.html" class="image-link">
          <img src="https://image.hjdang.com/posts/2024-06-09/e01948d0-f3ef-46e5-929c-cd3601a9a2ac000358.jpeg" alt="动漫1" /> <!-- 图片链接 -->
          <div class="image-caption">完美世界</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=1995276931,277448217&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=812" alt="动漫2" /> <!-- 图片链接 -->
          <div class="image-caption">大主宰</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img1.baidu.com/it/u=2194815574,3175355595&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1116" alt="动漫3" /> <!-- 图片链接 -->
          <div class="image-caption">斗罗大陆</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=85147756,2200833850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=842" alt="动漫4" /> <!-- 图片链接 -->
          <div class="image-caption">牧神记</div> <!-- 图片描述 -->
        </a>
        
        <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=3370591434,3524761512&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=701" alt="动漫6" /> <!-- 图片链接 -->
          <div class="image-caption">仙逆</div> <!-- 图片描述 -->
        </a>
         <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=2321152627,4191566342&fm=253&fmt=auto&app=138&f=JPEG?w=475&h=673" alt="动漫7" /> <!-- 图片链接 -->
          <div class="image-caption">时光代理人</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=3447196867,2870055944&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=797" alt="动漫8" /> <!-- 图片链接 -->
          <div class="image-caption">天官赐福</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img1.baidu.com/it/u=1255705208,617969833&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=682" alt="动漫9" /> <!-- 图片链接 -->
          <div class="image-caption">狐妖小红娘</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img0.baidu.com/it/u=1433741283,4132362595&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=706" alt="动漫10" /> <!-- 图片链接 -->
          <div class="image-caption">魔道祖师</div> <!-- 图片描述 -->
        </a>
        <a href="空白页面.html" class="image-link">
          <img src="https://img2.baidu.com/it/u=490883331,1752888414&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=748" alt="动漫11" /> <!-- 图片链接 -->
          <div class="image-caption">一念永恒</div> <!-- 图片描述 -->
        </a>
       
      </div>
    </section>

    <!-- 底部 -->
    <footer>
      <p>小宇的联系电话：19509658425</p>
      <p>小宇的QQ：19509658425</p>
      <p>© 2025 番剧推荐</p> <!-- 版权信息 -->
      <p>小宇组制作</p>
    </footer>


  </div>

 <script src="scripts.js"></script>
</body>
</html>


